<template>
  <div class="contains">
    <div class="top-item-div">
        <div class="number-item">
            <p style="color: #fff;">上链供应商总数</p>
            <div class="number-animation">


                <div class="number-css">
                     
                     <AnimatedNumber v-for="(sitem,sindex) in stna" :from="0" :to="sitem" :key="sindex">
                       <template #default="{option,item}">
                        <div class="one-item">{{ item.number }}</div>
                       </template>
                </AnimatedNumber>
                </div>

                <span style="color: #E5F0FF;font-size: 12px;">家</span>
            </div>
        </div>
        <div class="number-item">
            <p style="color: #fff;">链主企业数</p>
            <div class="number-animation">
                <div class="number-css">
                    <AnimatedNumber v-for="(sitem,sindex) in qtna" :from="0" :to="sitem" :key="sindex">
                        <template #default="{option,item}">
                          <div class="one-item">{{ item.number }}</div>
                        </template>
                    </AnimatedNumber>
                </div>
               
                <span style="color: #E5F0FF;font-size: 12px;">家</span>
            </div>
        </div>
    </div>
    <div class="bottom_bar_views">
        <div id="henanmap" style="width: 100%;height: 100%;"></div>
    </div>
    
  </div>
</template>

<script setup name="henan">

import { getCurrentInstance, proxyRefs, ref } from "vue"
import { useRouter } from "vue-router"
import * as echarts from 'echarts'
import hn from '@/utils/henan.json'
import myEventBus from '@/utils/notice'
const {proxy} = getCurrentInstance()
const router = useRouter()

const stn = ref('102')
const stna = ref([])

const qtn = ref('89')
const qtna = ref([])

const emitter = myEventBus
var myChart
emitter.on("resize",(res) =>{
 
    myChart.resize()
})

const mapdata = ref([
    {name:'数值',value:'12'}
]) //设置（获取）地图series数据

// 注册地图
function initMaps(){
    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('henanmap');
    echarts.registerMap('hn',hn)
    myChart = echarts.init(chartDom);
    // 指定图表的配置项和数据
    var option;
    option = {
        backgroundColor: 'transparent',
        title: {
            text: '',
            // subtext: '',
            // sublink: '',
            left: 'center',
            textStyle: {
            color: '#000'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.5)',
            borderWidth:0,
            textStyle: {
                color: '#fff',
                fontSize: "15"
            }
            
        },
        visualMap: {
            show:false, // 不显示柱状调色
            min: 0,
            max: 20,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series: [
            {
            name: '示范基地数',
            type: 'map',
            mapType: 'hn',
            geoIndex: 0,
            // aspectScale: 0.75,
            zoom:1.2,
            showLegendSymbol: false,
            itemStyle: {
              // 普通样式。
              normal: {
                borderWidth: 2,//边际线大小
                borderColor:'#00ffff',//边界线颜色
                areaColor:'#09295b'//默认区域颜色
              },
              // 高亮样式。
              emphasis: {
                // 高亮时点的颜色。
                color: '#fff',
                show: true,
                areaColor: '#69D2FF',//鼠标滑过区域颜色
                label: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
                      
              },
 

            },

            select: { // 地图选中区域样式
              label:{ // 选中区域的label(文字)样式
                color: '#fff'
              },
              itemStyle: {// 选中区域的默认样式
                areaColor: '#69D2FF'
              },
            },

            label: {
                normal: {
                show: true,
                color:'#fff'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            },
            roam: false, //禁止鼠标缩放
            animation: false,
            data: mapdata.value
            }
        ]

    }
    option && myChart.setOption(option);
}


function getCount(){

}

// 上链供应商总数 转数组
function snarr(){
    if(stn.value){
        var ntlength = stn.value.length;
        for(var i = 0 ; i < ntlength ; i++){
            stna.value.push(stn.value[i])
        }
    }
}
// 链主企业数 转数组
function qnarr(){
    if(qtn.value){
        var ntlength = qtn.value.length;
        for(var i = 0 ; i < ntlength ; i++){
            qtna.value.push(qtn.value[i])
        }
    }
}

onMounted(() =>{
    initMaps()
    snarr()
    qnarr()
})

</script>

<style lang="scss" scoped>
.contains{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}


.top-item-div{
    height: 120px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    .number-item{
        color: '#fff';
        font-size: 20px;
    }
}

.bottom_bar_views{
    flex: 1;
}

.number-animation{
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 .number-css{
    color: #fff;
    font-size: 30px;
    margin-right: 10px;
    display: flex;
    flex-direction: row;
    .one-item{
        background: linear-gradient(180deg, #004FEE 38%, #69D2FF 100%);
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 8px;
    }
 }
}


</style>
